import React, { CSSProperties } from 'react'
import { ConfirmationNumberOutlined } from '@material-ui/icons'
import PubSub from 'pubsub-js'
interface IProps {
    data: {
        gsize: string;
        gmethod: string;
        gcolor: string;
        gname: string;
        gdesc: string;
    }
}
const activeStyle: CSSProperties = {
    display: 'inline-block',
    border: '1px solid #e7e7e7',
    borderRadius: '5px',
    padding: '.5vh 5vw',
    fontSize: '14px',
    marginRight: '2vw',
    backgroundColor: '#f03e3e',
    color: '#fff'
}
const btnStyle: CSSProperties = {
    display: 'inline-block',
    border: '1px solid #e7e7e7',
    borderRadius: '5px',
    padding: '.5vh 5vw',
    fontSize: '14px',
    marginRight: '2vw',
    color: '#000'
}
const TitleInfo = (props: IProps) => {
    const gsize = props.data.gsize.split(',')
    const newSize = gsize.map(item => {
        const arr = item.split(':')
        const obj = {
            weight: arr[0],
            price: Number(arr[1]).toFixed(2)
        }
        return obj
    })
    const gcolor = props.data.gcolor.split(',')
    const { gmethod, gname, gdesc } = props.data
    const [sizeIndex, setSize] = React.useState(0)
    const [colorIndex, setColor] = React.useState(0)
    const [outSize, setSELSize] = React.useState(newSize[sizeIndex].weight)
    const [outMoney, setMoney] = React.useState(newSize[sizeIndex].price)
    const [outColor, setSELColor] = React.useState(gcolor[colorIndex])
    React.useEffect(() => {
        setTimeout(() => {
            PubSub.publish('changeMoney',outMoney)
            PubSub.publish('changeSize',outSize)
            PubSub.publish('changeColor',outColor)
        },200)
    },[ ]) // eslint-disable-line react-hooks/exhaustive-deps
    React.useMemo(() => {
        setSELSize( pre =>  pre = newSize[sizeIndex].weight)
        setMoney( pre => pre =newSize[sizeIndex].price)
    },[sizeIndex])// eslint-disable-line react-hooks/exhaustive-deps
    React.useMemo(() => {
        setSELColor(pre => pre = gcolor[colorIndex])
    },[colorIndex])// eslint-disable-line react-hooks/exhaustive-deps
    React.useMemo(() => {
        PubSub.publish('changeMoney',outMoney)
    },[outMoney])// eslint-disable-line react-hooks/exhaustive-deps
    React.useMemo(() => {
        PubSub.publish('changeSize',outSize)
    },[outSize])// eslint-disable-line react-hooks/exhaustive-deps
    React.useMemo(() => {
        PubSub.publish('changeColor',outColor)
    },[outColor])// eslint-disable-line react-hooks/exhaustive-deps
    return (
        <>
            {/* 价格区域 */}
            <div style={{
                width: '100vw',
                position: 'relative'
            }}>
                <img src="/assets/picsrc/detailBg.png" alt="" style={{
                    width: '100%',
                    display: 'block'
                }} />
                <div style={{
                    position: 'absolute',
                    top: '20%',
                    left: '5%'
                }}>
                    <span style={{ color: '#e6b686', fontSize: '13px' }}>￥</span>
                    <span style={{ color: '#e6b686', fontSize: '16px' }}>{newSize[sizeIndex].price}</span>
                    <span style={{ color: '#fff', fontSize: '13px', marginLeft: '3vw' }}>低价特惠</span>
                </div>
                <div style={{
                    position: 'absolute',
                    bottom: '28%',
                    left: '5%',
                    fontSize: '13px',
                    color: '#fff'
                }}>
                    <span>价格</span>
                    <span style={{ textDecoration: 'line-through' }}>￥{((newSize[sizeIndex].price as unknown as number) * 1.5).toFixed(2)}</span>
                </div>
            </div>
            {/* 商品标题、描述 */}
            <div style={{
                padding: '.7vh 5vw',
                backgroundColor: '#fff'
            }}>
                {/* 标题 */}
                <div style={{ fontSize: '13px', color: '#000' }}>
                    {gname}
                </div>
                {/* 描述 */}
                <div style={{ fontSize: '12px', color: '#e75656', marginTop: '.7vh', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
                    {gdesc}
                </div>
            </div>
            {/* 新客优惠 */}
            <div style={{
                marginTop: '3vh',
                marginBottom: '1.5vh',
                backgroundColor: '#fff',
                padding: '1vh 5vw',
                display: 'flex',
                flexFlow: 'row nowrap',
                justifyContent: 'space-between'
            }}>
                <div style={{ display: 'flex', alignItems: 'flex-start' }}>
                    <ConfirmationNumberOutlined style={{ color: '#999', marginRight: '2vw' }} fontSize='small' />
                    <span style={{ fontSize: '13px', color: '#000' }}>新客优惠</span>
                </div>
                <span style={{ fontSize: '12px', color: '#999' }}>新客专题，超值折扣</span>
            </div>
            {/* 选择颜色、规格 */}
            <>
                {/* 显示选择状态 */}
                <div style={{ padding: '1vh 5vw', fontSize: '13px', backgroundColor: '#fff', marginBottom: '.4vh' }}>
                    <span style={{ color: '#666' }}>已选：</span>
                    {
                        newSize.length > 0 && newSize[0] ? (
                            <span style={{ color: '#EA5858' }}>{`"${newSize[sizeIndex].weight}"`}</span>
                        ) : <></>
                    }
                    {
                        gmethod ? (
                            <span style={{ color: '#EA5858' }}>{`"${gmethod}"`}</span>
                        ) : <></>
                    }
                    {
                        gcolor.length > 0 && gcolor[0] ? (
                            <span style={{ color: '#EA5858' }}>{`"${gcolor[colorIndex]}"`}</span>
                        ) : <></>
                    }

                </div>
                {/* 规格选择 */}
                {
                    // 如果存在
                    newSize.length > 0 && newSize[0] ?
                        (
                            <div style={{
                                padding: '1vh 5vw', backgroundColor: '#fff', display: 'flex'
                            }}>
                                <span style={{
                                    color: '#999', fontSize: '12px'
                                }}>规格：</span>
                                <div style={{ display: 'flex', flexFlow: 'row wrap' }} onClick={(e) => {
                                    if (!(e.target as any).dataset.index) return
                                            setSize( pre => pre = Number((e.target as any).dataset.index))
                                }}>
                                    {
                                        newSize.map((item, index) => {
                                            return (
                                                <div key={index} style={index === sizeIndex ? { ...btnStyle, ...activeStyle } : btnStyle} data-index={index}>
                                                    {item.weight}
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        ) : (<></>)
                }


                {/* 配方显示 */}
                {
                    // 如果存在
                    gmethod ?
                        (
                            <div style={{
                                padding: '1vh 5vw', backgroundColor: '#fff', display: 'flex'
                            }}>
                                <span style={{
                                    color: '#999', fontSize: '12px'
                                }}>配方：</span>
                                <div style={{ display: 'flex', flexFlow: 'row wrap' }}>
                                    <div style={{ ...btnStyle, ...activeStyle }}>
                                        {gmethod}
                                    </div>
                                </div>
                            </div>
                        ) : (<></>)
                }

                {/* 颜色选择 */}
                {
                    // 如果存在
                    gcolor.length > 0 && gcolor[0] ?
                        (
                            <div style={{
                                padding: '1vh 5vw', backgroundColor: '#fff', display: 'flex'
                            }}>
                                <span style={{
                                    color: '#999', fontSize: '12px'
                                }}>颜色：</span>
                                <div style={{ display: 'flex', flexFlow: 'row wrap' }} onClick={(e) => {
                                    if ((e.target as any).dataset.index) {
                                                setColor(pre => pre = Number((e.target as any).dataset.index))
                                    }
                                }}>
                                    {
                                        gcolor.map((item, index) => {
                                            return (
                                                <div key={index} style={index === colorIndex ? { ...btnStyle, ...activeStyle } : btnStyle} data-index={index}>
                                                    {item}
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        ) : (<></>)
                }
            </>
        </>
    )
}

export default TitleInfo